<style lang="scss" scoped>
@import '../../assets/login.scss';
</style>

<template lang="">

	<div class="login-container">
		<van-nav-bar title="忘记密码" left-text="返回" left-arrow @click-left="back" />
		<div class="title" style="margin-top:0.3rem;">
			<p class="text">{{title}}</p>
		</div>
		<van-form v-if="step === 0" class="form" @submit="check">
			<div class="form-item">
				<van-field v-model="checkForm.mobile" label="手机号码" name="mobile" type="number" placeholder="请输入手机号码"
					size="large" :rules="[{required:true,pattern:/^[1]([3-9])[0-9]{9}$/}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<van-field v-model="checkForm.imgCode" label="图片验证码" name="imgCode" center clearable
					placeholder="请输入图片验证码" :rules="[{required:true}]">
					<template slot="button">
						<van-image width="1.7rem" height="0.6rem" :src="imgCodeImg" @click="refreshImgCode"></van-image>
					</template>
				</van-field>
			</div>
			<div class="form-item">
				<van-field v-model="checkForm.code" type="number" label="短信验证码" name="code" center clearable
					placeholder="请输入短信验证码" :rules="[{required:true}]">
					<template slot="button">
						<van-button v-if="!showCountDown" size="small" type="primary" color="#179AFE"
							style="width:1.7rem;" native-type="button" @click.stop="sendCode">发送验证码</van-button>
						<van-count-down v-else ref="countDown" :time="60 * 1000" use-slot :auto-start="false"
							@change="timeChange" @finish="countDownFinish">
							<span class="time"> {{ timeData.seconds }}秒后重新获取</span>
						</van-count-down>
					</template>
				</van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" native-type="submit" block>验证手机号</van-button>
			</div>
		</van-form>
		<van-form v-else class="form" @submit="reset">
			<div class="form-item">
				<p class="label">密码</p>
				<van-field v-model="form.password" name="password" type="password" placeholder="请输入密码" size="large"
					:rules="[{required:true}]" center clearable></van-field>
			</div>
			<div class="form-item">
				<p class="label">确认密码</p>
				<van-field v-model="form.repeatPassword" name="repeatPassword" type="password" placeholder="请再次输入密码" size="large"
					:rules="[{required:true,validator:validatorPassword}]" center clearable></van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" native-type="submit" block>设置新密码</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
import {
	baseUrl,
	getCode,
	checkCode,
	resetPassword
} from '../../api/index';
import {
	isMobile
} from '../../utils/validate';

export default {
	name: 'ResetPassword',
	data() {
		return {
			step: 0,
			imgCodeImg: baseUrl + 'authImage', //图片验证码地址
			checkForm: {
				mobile: '',
				imgCode: '',
				code: ''
			},
			showCountDown: false,
			timeData: {},
			form: {
				password: '',
				repeatPassword: ''
			}
		};
	},
	computed: {
		title() {
			return this.step === 0 ? '忘记密码' : '设置新密码';
		}
	},
	methods: {
		back() {
			if (this.step === 0) {
				this.$router.back();
			} else {
				this.step = 0;
			}
		},
		validatorPassword(val) {
			return this.form.password === this.form.repeatPassword;
		},
		refreshImgCode() {
			this.imgCodeImg = this.imgCodeImg + `?time=${new Date().getTime()}`;
		},
		timeChange(time) {
			this.timeData = time;
		},
		countDownFinish() {
			this.showCountDown = false;
			this.refreshImgCode();
		},
		async sendCode() {
			if (!isMobile(this.checkForm.mobile) || !this.checkForm.imgCode) {
				this.$toast('请输入手机号和图片验证码!');
				return;
			} else {
				try {
					const codeParams = {
						mobilenum: this.checkForm.mobile,
						imgcode: this.checkForm.imgCode
					};

					const {
						errorcode,
						errormsg
					} = await getCode('passwdcode', codeParams);

					if (errorcode == 0) {
						this.$toast('发送成功,请注意查收');

						this.showCountDown = true;

						this.$nextTick(() => {
							this.$refs.countDown.start();
						});
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					this.showCountDown = false;
					console.log(error);
				}
			}
		},
		async check() {
			try {
				const params = {
					mobilenum: this.checkForm.mobile,
					code: this.checkForm.code
				};

				const {
					errorcode,
					errormsg
				} = await checkCode(params);

				if (errorcode == 0) {
					this.step = 1;
					document.title = '重置密码';
				} else {
					this.$toast(errormsg);
				}
			} catch (error) {
				console.log(error);
			}
		},
		async reset() {
			try {
				const params = {
					mobilenum: this.checkForm.mobile,
					newpasswd: this.form.password
				};

				const {
					errorcode,
					errormsg
				} = await resetPassword(params);

				if (errorcode == 0) {
					this.$toast('设置成功');
					this.$router.back();
				} else {
					this.$toast(errormsg);
				}
			} catch (error) {
				console.log(error);
			}
		}
	}
};
</script>
